<template>
	<el-container>
        <el-header>
			<div class="left-panel">
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-select v-model="search.customer_id" placeholder="请选择" filterable clearable>
                        <el-option v-for="item in clientList" :key="item.id" :label="item.customer_name" :value="item.id"></el-option>
                    </el-select>
					<el-button type="primary" icon="el-icon-search" @click="getData"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
        <el-main>
            <el-card shadow="hover" class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>月销售回款报表</span>
                    </div>
                </template>
                <scEcharts height="600px" :option="option"></scEcharts>
            </el-card>
        </el-main>
        <el-footer style="height:51px;"></el-footer>
	</el-container>

</template>

<script>
export default {
	name: '月销售报表',
	components: {
	},
	data() {
		return {
            option: {},
            clientList:[],
            search: {
                customer_id: null,
            },
		}
	},
	mounted() {
        this.getData()
        this.getClient()
	},
	methods: {
        async getData() {
            var res = await this.$API.table.monthsale.post({customer_id:this.search.customer_id})
            console.log(res);
            let array = []
            let a = []
            let b = []
            let c = []
            let d = []
            res.data.map(item=>{
                array.push(item.month)
                a.push(item.start_money)
                b.push(item.money)
                c.push(item.pay_money)
                d.push(item.end_money)
            })
            let set = {
                show: true,
                rotate: 1,
                align: 'center',
                verticalAlign: 'top',
                position: 'top',
                distance: 15,
                formatter: ' ¥{c}',
            }
            let emphasis = {
                focus: 'series'
            }
            this.option = {
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        }
                },
                legend: {
                    data: ['期初应收', '本期应收', '本期已收', '期末应收(月)']
                },
                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: array
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '期初应收',
                        type: 'bar',
                        barGap: '20%',
                        barCategoryGap: '50%',
                        label: set,
                        emphasis: emphasis,
                        data: a
                    },
                    {
                        name: '本期应收',
                        type: 'bar',
                        barGap: '20%',
                        barCategoryGap: '50%',
                        label: set,
                        emphasis: emphasis,
                        data: b
                    },
                    {
                        name: '本期已收',
                        type: 'bar',
                        barGap: '20%',
                        barCategoryGap: '50%',
                        label: set,
                        emphasis: emphasis,
                        data: c
                    },
                    {
                        name: '期末应收(月)',
                        type: 'bar',
                        barGap: '20%',
                        barCategoryGap: '50%',
                        label: set,
                        emphasis: emphasis,
                        data: d
                    }
                ]
            }
        },
        // 客户列表
        async getClient(){
            var res = await this.$API.client.client.all.get();
            this.clientList = res.data
        },
        refresh() {
			for (const key in this.search) {
				this.search[key] = null;
			}
			this.getData()
		},
	}
}
</script>

<style></style>
